<template>
	<view class="good-box m-20 p-20 bg-white radius-15">
		<view class="title-box">
			为您推荐
		</view>
		<view class="data-box">
			<view v-for="cell, cellIndex in state.goodsList" :key="cellIndex" class="waterfall-box">
				<view v-for="item, index in cell" :key="index" class="card-box">
					<coreshop-goods-card type="vertical" imgHeight="295rpx" imgWidth="295rpx"
						:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
						<template #goodPrice>
							<view class="price-msg" @click="hanldeClickGoods(item)">
								<view class="price-box">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="num">{{ item.price }}</text>
										<text class="mktprice" v-if="item.mktprice">￥{{ item.mktprice }}</text>
									</view>
									<view class="buyCount">已售{{ item.buyCount }}{{ item.unit }}</view>
								</view>
								<Point :data="item" :flex="false" @hanldeClickGoods="hanldeClickGoods(item)"></Point>
							</view>
						</template>
					</coreshop-goods-card>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import type { Response, GoodsType } from "@/core/models";
	import { splitArrayByStep } from '@/core/utils';
	import { queryGoodsRecommendList } from '@/core/api';
	import Point from '@/pages/components/custom-page/components/home-goods/point.vue';

	const props = withDefaults(defineProps<{
		queryParams : any,
	}>(), {
		queryParams: {
			id: 10,
			data: true
		},
	});


	const state = reactive<{
		goodsList : Array<GoodsType>,
	}>({
		goodsList: [],
	})

	onMounted(() => {
		getGoodsRecommendList();
	})

	/** 获取为您推荐商品列表数据 */
	const getGoodsRecommendList = async () => {
		const goodsRecommendList : Response<Array<GoodsType>> = await queryGoodsRecommendList(props.queryParams);
		state.goodsList = splitArrayByStep(goodsRecommendList?.data, 2);
	}

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : GoodsType) => {
		return {
			id: item.id,
			image: item.image,
			name: item.name,
			brief: item.brief,
			price: item.price,
			mktprice: item.mktprice,
			isRecommend: item.isRecommend,
			isHot: item.isHot,
		}
	}

	const hanldeClickGoods = (item : GoodsType) => {
		uni.navigateTo({
			url: `/pages/goods/detail?id=${item.id}`
		})
	}
</script>
<style lang="scss" scoped>
	@import './goods-detail-recommend.scss';
</style>